<template>
    <div>
        <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header" style="background: rgb(9, 154, 135);">
      <div class="logo" style="background:url(/static/img/tigongshang.png)" />
      <div style="float:right">
         
        <a-avatar style="backgroundColor:#ffffff; color:#888888;" icon="user" />
        <a-dropdown>
          
              
          <a class="ant-dropdown-link" href="#" style="color:#ffffff;text-decoration: blink;">
             {{username}}
            <a-icon type="down"/>
          </a>
           
           
          <a-menu slot="overlay">
            
            <!-- <a-menu-item >
                
                <a href="/ant_login" >登录账号</a>
             
            </a-menu-item> -->
            <a-menu-item >
                <a href="javascript:;">修改密码</a>
                <a href="/admin_login" >登录账号</a>
                <!-- <a-button type="primary" @click="showModal"> -->
            <!-- 退出登录 -->
        <!-- </a-button> -->
         <a  @click="qiu">退出登录</a> 
        <a-modal
                title="退出登录"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
        >
            <p>{{ ModalText }}</p>
        </a-modal>
              <!-- <a @click="qiu">退出登录</a> -->
            </a-menu-item>
            
          </a-menu>
          
        </a-dropdown>
      </div>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" :style="{ overflow: 'auto', height: '200vh', position: 'fixed', left: 0, background: '#fff' }">
        <a-menu mode="inline" :selectedKeys="[$route.path]" :defaultOpenKeys="['sub2','sub3']" :style="{ height: '100%', borderRight: 0 }">
          <a-menu-item key="1">
            <a-icon type="database"/>
            <span class="nav-text">用户中心</span>
            <router-link to="/user"></router-link>
            <a-menu-item >      
            </a-menu-item>
          </a-menu-item>
          <a-sub-menu key="sub2">
            <span slot="title">
              <a-icon type="user"/>用户管理
            </span>
            <a-menu-item key="/user_list" >
            <a-icon type="database"/>用户列表
              <router-link to="/user_list"></router-link>
            </a-menu-item>
            <!-- <a-menu-item key="3">用户管理
              <router-link to="/uer_admin"></router-link>
            </a-menu-item> -->
            <!-- <a-menu-item key="4">充值记录</a-menu-item>
            <a-menu-item key="5" >已购资源</a-menu-item>
            <a-menu-item key="6" >我的收藏</a-menu-item>
            <a-menu-item key="7" >我的文章</a-menu-item>
            <a-menu-item key="8" >发布资源</a-menu-item>
            <a-menu-item key="9" >推广佣金</a-menu-item>
            <a-menu-item key="10" >修改密码</a-menu-item> -->
            <!-- <a-menu-item key="11" @click="qiu">退出登录</a-menu-item> -->
          </a-sub-menu>
                    <a-sub-menu key="sub3">
            <span slot="title">
              <a-icon type="database"/>权限管理
            </span>
            <a-menu-item key="/role" >角色列表
              <router-link to="/role"></router-link>
            </a-menu-item>
            <a-menu-item key="1">权限列表
              <router-link to="/role_list"></router-link>
            </a-menu-item>
            <!-- <a-menu-item key="4">充值记录</a-menu-item>
            <a-menu-item key="5" >已购资源</a-menu-item>
            <a-menu-item key="6" >我的收藏</a-menu-item>
            <a-menu-item key="7" >我的文章</a-menu-item>
            <a-menu-item key="8" >发布资源</a-menu-item>
            <a-menu-item key="9" >推广佣金</a-menu-item>
            <a-menu-item key="10" >修改密码</a-menu-item> -->
            <!-- <a-menu-item key="11" @click="qiu">退出登录</a-menu-item> -->
          </a-sub-menu>


            <a-sub-menu key="sub4">
            <span slot="title">
              <a-icon type="database"/>工单管理
            </span>
            <a-menu-item key="/order" >工单类型</a-menu-item>
              <router-link to="/order"></router-link>
            </a-menu-item>
            <a-menu-item key="1">权限列表
              <router-link to="/role_list"></router-link>
            </a-menu-item>
            <!-- <a-menu-item key="4">充值记录</a-menu-item>
            <a-menu-item key="5" >已购资源</a-menu-item>
            <a-menu-item key="6" >我的收藏</a-menu-item>
            <a-menu-item key="7" >我的文章</a-menu-item>
            <a-menu-item key="8" >发布资源</a-menu-item>
            <a-menu-item key="9" >推广佣金</a-menu-item>
            <a-menu-item key="10" >修改密码</a-menu-item> -->
            <!-- <a-menu-item key="11" @click="qiu">退出登录</a-menu-item> -->
          </a-sub-menu>










        </a-menu>
      </a-layout-sider>
      <a-layout :style="{ marginLeft:'200px', padding:'24px 24px 0px' }">
        <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px', overflow: 'initial'}">
        <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
       


    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
          collapsed: false,
          uid:localStorage.getItem('uid'),
          username:localStorage.getItem('username'),
          ModalText: '你确定注销账号吗？, 是否继续?', 
          visible: false,
          confirmLoading: false,
          user_list:{},
          base_url:"http://127.0.0.1:8000/",
        }
    },
    components: {
        // My_Home,
        // Student
    },
    methods: {
        // menu(s){
        //     console.log(s)
        //     this.$router.push(s)
        // },
        user(s){
            console.log(s)
            this.$router.push(s)
        },
        //点击cancel
        handleCancel(e) {
            // this.ModalText = '注销账号失败';
            this.confirmLoading = true;
            this.$message.info('注销账号失败');
            console.log('注销账号失败');
            this.visible = false;
        }, 
        //点击ok
        handleOk(e) {
            this.ModalText = '已注销账号';
            // this.$message.info('注销账号已成功,请重新登录账号');
            this.confirmLoading = true;
            if(this.username){
                    window.localStorage.clear()
                    console.log('注销账号已成功');																																
                    this.$router.go(0)
                }
            setTimeout(() => {
                this.visible = false;
                this.confirmLoading = false;
            },2000)
            
        },
        // 退出
        qiu(){
            if(this.username){
                window.localStorage.clear()
                console.log('注销账号已成功');																																
                this.$router.go(0)
                this.$router.push({
                    'name':'Ant_Login'
                })
            }
        },
        // get_uer(){
        //   console.log(this.uid)
        //   axios({
        //     url:this.base_url + 'userinfo/',
        //     params:{
        //       "num":this.uid
        //     }
        //   }).then(resp=>{
        //     console.log(resp.data)
        //     this.user_list=resp.data
        //   })
        // }
    },
    created() {
      // this.get_uer()  

    }
}
</script>

<style>
table{
    border-collapse: collapse;
    margin: 0% auto;
}
tr,td{
    /* border: 1px solid black; */
    width: 200px;
    margin: 0% auto;
}
公告美化
.alert-warning {
    color: #fff!important;
    background-color: #818aff!important;
    border-color: #8289ff!important;
}
</style>
